<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入</title>
    <script src="/./jquery-1.7.2.js"></script>
    <style>

        #parent{width:550px; height:10px; border:2px solid #09F;}
        #son {
            width:0;
            height:100%;
            border-radius:10px;
            background-color:#e94829;
            text-align:center;
            line-height:20px;
            font-size:15px;
            color:white;
            font-weight:bold;

        }

    </style>
</head>
<body>
<input type="file" id="pic" name="pic"  onchange="uploadFile()">
<div class="grad" id="son"></div>
</body>
<script>
    function uploadFile(){
        var pic = $("#pic").get(0).files[0];
        var formData = new FormData();
        formData.append("file" , pic);
        $.ajax({
            type: "POST",
            url: "/import",
            data: formData ,
            processData : false, //必须false才会自动加上正确的Content-Type
            dataType: 'json',
            contentType : false ,//必须false才会避开jQuery对 formdata 的默认处理 
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            },
            success: function(res) {
                console.log(res);
                $("#versionsize").val(res.filesize);
                $("#versionurl").val(res.url);
            }
        });
    }

    /**   *  侦查附件上传情况  ,这个方法大概0.05-0.1秒执行一次   */
    function onprogress(evt){
        var loaded = evt.loaded;         //已经上传大小情况
        var tot = evt.total;           //附件总大小
        var per = Math.floor(100*loaded/tot);   //已经上传的百分比
        $("#son").html( per +"%" );
        $("#son").css("width" , per +"%");
    }

</script>
</html>